<template>
    <div class="main">
      <canvas id="particle-canvas" width="1245" height="905"></canvas>  
      <div class="content">
      <div class="login">
      <h4 class='title'>酒店管理</h4>
         <el-form
      size="mini"
       :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="40px" class="demo-ruleForm">
        <el-form-item label="账号" prop="loginId">
    <el-input  v-model="ruleForm.loginId" 
    autocomplete="off">
    </el-input>
  </el-form-item>
  <el-form-item label="密码" prop='loginPwd'> 
    <el-input type="password" v-model="ruleForm.loginPwd" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="" prop='loginPwd'>
     <el-checkbox v-model="ruleForm.checkMe">记住密码</el-checkbox>
      </el-form-item>
  <!-- <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item> -->
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
    <el-button @click="resetForm('ruleForm')">取消</el-button>
  </el-form-item>
</el-form>
      </div>
     </div>
    </div>
</template>
<script>
import {strToMd5}from'../util/md5'
//导入动画 画布方法
import{start}from'../assets/js/login'
export default {
     mounted() {
       start()
         },
   data() {
      // var checkAge = (rule, value, callback) => {
      //   if (!value) {
      //     return callback(new Error('年龄不能为空'));
      //   }
      //   setTimeout(() => {
      //     if (!Number.isInteger(value)) {
      //       callback(new Error('请输入数字值'));
      //     } else {
      //       if (value < 18) {
      //         callback(new Error('必须年满18岁'));
      //       } else {
      //         callback();
      //       }
      //     }
      //   }, 1000);
      // };
      //验证密码的方法
       var validateloginId= (rule, value, callback) => {
        if (value === "") {
          callback(new Error('请输入账号'));
      
       
        }else{
          callback()
        }
      };
   
      var validateloginPwd = (rule, value, callback) => {
        if (value === "") {
          callback(new Error('请输入密码'));
      
        }else{
          callback()
        }
      };
      // var validatePass2 = (rule, value, callback) => {
      //   if (value === '') {
      //     callback(new Error('请再次输入密码'));
      //   } else if (value !== this.ruleForm.pass) {
      //     callback(new Error('两次输入密码不一致!'));
      //   } else {
          
      //     callback();
      //   }
      //   };
      // };
      return {
        //表单数据
        ruleForm: {
         loginId: "",
         loginPwd: "",
         checkMe:false
         
        },
        rules: {
          //表单的验证数据
        loginPwd: [
            { validator: validateloginPwd, trigger: 'blur' }
          ],
        loginId: [
            { validator:validateloginId, trigger: 'blur' }
          ],
          // age: [
          //   { validator: checkAge, trigger: 'blur' }
          // ]
        }
      };
    },
    methods: {
      //表单提交方法
      submitForm(formName) {
        //判断表单数据是否验证成功
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
          this.ruleForm.loginPwd = strToMd5(this.ruleForm.loginPwd)

           let {message,success,token} =await this.$get('/Admin/Login',this.ruleForm)
           //判断是否登录成功
           if(success){
          //服务器会返回一个token,里面保存的是你的身份信息
          //通常会保存在浏览器的储存空间中
          //浏览器的缓存空间，有两种：localStorage和sessionStorage里面保存
          //的数据随着浏览器的关闭而清空
          sessionStorage.setItem('token',token)
              
            // this.$setToken();

            this.$router.push('/layout')
           }
        

           
        
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //表单重置方法
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
    
}
</script>
<style scoped lang="scss">
#particle-canvas {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, rgb(10, 10, 50) 0%,rgb(60, 10, 60) 100%);
  vertical-align: middle;
}
  .main{
    width: 100vw;
    height: 100vh;
    position:relative;
    .content{
     
      background-color: transparent;
       top: 0;
      left: 0;
      position: absolute;
      width: 100%;
    height: 100%;
      display: flex;
    justify-content: center;
    align-items: center;
      .login{
      width: 440px;
    border-radius: 5px;
      border: 1px solid#ccc;
      padding: 20px;
      .title{
        font-size: 18px;
        color:white;
        text-align: center;
        margin-bottom: 20px;
      }
    }
    
    }
  }  
</style>
